<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文本擦除效果</title>
</head>

<body>
    <div class="container">
        <p>Most of us compare ourselves with anyone we think is happier — a relative, someone we know a lot, or someone
            we hardly know. As a result, what we do remember is anything that makes others happy, anything that makes
            ourselves unhappy, totally forgetting that there is something happy in our own life.
            So the best way to destroy happiness is to look at something and focus on even the smallest flaw. It is the
            smallest flaw that would make us complain. And it is the complaint that leads to us becoming unhappy.
            If one chooses to be happy, he will be blessed; if he chooses to be unhappy, he will be cursed. Happiness is
            just what you think will make you happy.</p>
        <p class="eraser">
            <span class="text">Most of us compare ourselves with anyone we think is happier — a relative, someone we
                know a lot, or someone
                we hardly know. As a result, what we do remember is anything that makes others happy, anything that
                makes
                ourselves unhappy, totally forgetting that there is something happy in our own life.
                So the best way to destroy happiness is to look at something and focus on even the smallest flaw. It is
                the
                smallest flaw that would make us complain. And it is the complaint that leads to us becoming unhappy.
                If one chooses to be happy, he will be blessed; if he chooses to be unhappy, he will be cursed.
                Happiness is
                just what you think will make you happy.</span>
        </p>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 1em auto;
            line-height: 2;
            position: relative;
            color: aliceblue;
            background-color: #000;
        }

        .eraser {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
        }

        .text {
            --p: 0.1%;
            background: linear-gradient(to right, #0000 var(--p), #000 calc( var(--p) + 100px) );
            color: transparent;
            animation: erase 5s linear forwards;
        }
        @property --p{
            syntax: '<percentage>';
            initial-value: 0%;
            inherits: false;
        }
        @keyframes erase {
            to{
                --p:100%;
            }
        }
    </style>
</body>

</html>